<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./public/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/reset.css">
    <script src="../jquery-1.8.3.min.js"></script>
    <style>
        #box{
            width: 100%;
            height: 520px;
            border:1px solid #000;
            border-radius:50px;
            padding:50px;
            overflow:hidden;
        }
        .media img{
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>JQ 新闻滚动效果</h1>
                <hr>
                <div id="box">
                    <ul class="media-list">
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv009.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 9</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv001.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 1</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv002.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 2</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv003.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 3</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv004.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 4</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv005.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 5</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv006.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 6</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv007.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 7</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                        <li class="media mt50">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="../imgs/Meinv008.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Media heading 8</h3>
                                <p>秦岚晒写真大片风格多变 优雅霸气切换自如 .. [查看详情]</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            setInterval(function (){
                $('.media-list li')
                .last().fadeTo(0,0).hide()
                .prependTo('.media-list').slideDown(1000).fadeTo(1000, 1);
            },3000);
        });
    </script>
</body>
</html>